import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { Editor } from 'react-draft-wysiwyg';
import { EditorState, convertToRaw, convertFromHTML, ContentState } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Checkbox,
  Radio,
  Badge,
  Divider,
  Table,
} from 'antd';
const { RangePicker } = DatePicker;
const { TextArea } = Input;
const confirm = Modal.confirm;
import DescriptionList from 'components/DescriptionList';
const { Description } = DescriptionList;
const RadioGroup = Radio.Group;

import {
  levelList,
  memberUpdate,
  memberAuthInfo,
  memberAudit,
  memberAttentionList,
  memberMonitorList,
  memberPackageList,
  memberExport,
} from '../../services/api';
import { getArrFromObj } from '../../utils/utils';

import StandardTable from 'components/StandardTable';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

import styles from './member.less';

const FormItem = Form.Item;
const { Option } = Select;
const getValue = obj =>
  Object.keys(obj)
    .map(key => obj[key])
    .join(',');

const DEFAULT_OPTION = {
  id: '-1',
  name: '全部',
};

const USER_TYPE_MAP = {
  '0': '个人',
  '1': '企业',
  '2': '服务机构',
  '3': '高校',
  '4': '研发',
};

const USER_TYPE_ARR = [DEFAULT_OPTION].concat(getArrFromObj(USER_TYPE_MAP));

const STATUS_MAP = {
  0: '无效',
  1: '有效',
};
const STATUS_ARR = [DEFAULT_OPTION].concat(getArrFromObj(STATUS_MAP));
const STATUS_ARR_NO_DEFAULT = getArrFromObj(STATUS_MAP);

const AUTH_STATE_MAP = {
  0: '未认证',
  1: '待认证',
  2: '认证通过',
  3: '认证不通过',
};
const AUTH_STATE_ARR = [DEFAULT_OPTION].concat(getArrFromObj(AUTH_STATE_MAP));

const GENDER_MAP = {
  0: '未知',
  1: '男',
  2: '女',
};

const PATENT_CLS_MAP = {
  fmzl: '发明类型',
  syxx: '实用类型',
  wgzl: '外观类型',
};

const PAGE_SIZE = 10;

@connect(({ member, loading }) => {
  return {
    member,
    loading: loading.models.member,
  };
})
@Form.create()
export default class List extends PureComponent {
  state = {
    selectedRows: [],
    formValues: {},
    id: null,
    levelList: [],
    levelListNoDefault: [],
    levelObj: {},
    levelOrigin: [],

    levelVisible: false,
    packageVisible: false,
  };

  componentDidMount() {
    this.init();
    this.initLevel();
  }

  init() {
    const { dispatch } = this.props;
    dispatch({
      type: 'member/queryList',
      payload: {
        pageNum: 1,
        pageSize: PAGE_SIZE,
      },
    });
  }

  async initLevel() {
    const { code, message, data } = await levelList();

    if (code === 200) {
      const levelObj = {};
      data.list.map(item => {
        levelObj[item.id] = item.name;
      });
      this.setState({
        levelObj,
        levelList: [DEFAULT_OPTION].concat(getArrFromObj(levelObj)),
        levelListNoDefault: [DEFAULT_OPTION].concat(getArrFromObj(levelObj)),
        levelOrigin: data.list,
      });
    } else {
      message.error(message);
    }
  }

  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const { dispatch } = this.props;
    const { formValues } = this.state;

    const filters = Object.keys(filtersArg).reduce((obj, key) => {
      const newObj = { ...obj };
      newObj[key] = getValue(filtersArg[key]);
      return newObj;
    }, {});

    const params = {
      ...formValues,
      ...filters,
      pageNum: pagination.current,
      pageSize: pagination.pageSize,
    };
    if (sorter.field) {
      params.sorter = `${sorter.field}_${sorter.order}`;
    }

    dispatch({
      type: 'member/queryList',
      payload: params,
    });
  };

  handleFormReset = () => {
    const { form, dispatch } = this.props;
    form.resetFields();
    this.setState({
      formValues: {},
    });
    dispatch({
      type: 'member/queryList',
      payload: {
        pageNum: 1,
        pageSize: PAGE_SIZE,
      },
    });
  };

  handleSelectRows = rows => {
    this.setState({
      selectedRows: rows,
    });
  };

  handleSearch = e => {
    e.preventDefault();

    const { dispatch, form } = this.props;

    form.validateFields((err, fieldsValue) => {
      if (err) return;

      if (fieldsValue.createTime && fieldsValue.createTime.length) {
        fieldsValue.startTime =
          moment(fieldsValue.createTime[0]).format('YYYY-MM-DD') + 'T00:00:00Z';
        fieldsValue.endTime = moment(fieldsValue.createTime[1]).format('YYYY-MM-DD') + 'T23:59:59Z';
      } else if (!fieldsValue.createTime || !fieldsValue.createTime.length) {
        delete fieldsValue.startTime;
        delete fieldsValue.endTime;
      }

      delete fieldsValue['createTime'];
      if (fieldsValue['userType'] === '-1') {
        delete fieldsValue['userType'];
      }
      if (fieldsValue['authState'] === '-1') {
        delete fieldsValue['authState'];
      }
      if (fieldsValue['levelId'] === '-1') {
        delete fieldsValue['levelId'];
      }
      if (fieldsValue['status'] === '-1') {
        delete fieldsValue['status'];
      }

      const values = {
        ...fieldsValue,
        pageNum: 1,
        pageSize: PAGE_SIZE,
      };

      dispatch({
        type: 'member/queryList',
        payload: values,
      });
    });
  };

  async handleExport() {
    const { id, status } = this.state;

    const params = {};

    const { form } = this.props;

    form.validateFields(async (err, fieldsValue) => {
      if (err) return;

      if (fieldsValue.createTime && fieldsValue.createTime.length) {
        fieldsValue.startTime =
          moment(fieldsValue.createTime[0]).format('YYYY-MM-DD') + 'T00:00:00Z';
        fieldsValue.endTime = moment(fieldsValue.createTime[1]).format('YYYY-MM-DD') + 'T23:59:59Z';
      } else if (!fieldsValue.createTime || !fieldsValue.createTime.length) {
        delete fieldsValue.startTime;
        delete fieldsValue.endTime;
      }

      delete fieldsValue['createTime'];
      if (fieldsValue['userType'] === '-1') {
        delete fieldsValue['userType'];
      }
      if (fieldsValue['authState'] === '-1') {
        delete fieldsValue['authState'];
      }
      if (fieldsValue['levelId'] === '-1') {
        delete fieldsValue['levelId'];
      }
      if (fieldsValue['status'] === '-1') {
        delete fieldsValue['status'];
      }

      const values = {
        ...fieldsValue,
        pageNum: 1,
        pageSize: PAGE_SIZE,
      };

      await memberExport(values);
    });
  }

  handleCancel(field) {
    this.setState({
      [field]: false,
    });
  }

  async handleLevelEditSave(e) {
    const { id, levelId } = this.state;
    if (!levelId) {
      return message.error('请选择会员等级');
    }

    const params = { id, levelId };

    const response = await memberUpdate(params);

    if (response.code === 200) {
      this.setState({
        levelVisible: false,
      });

      this.init();
    } else {
      message.error(response.message);
    }
  }

  async handleStatusEditSave() {
    const { id, status } = this.state;

    const params = { id, status };

    const response = await memberUpdate(params);

    if (response.code === 200) {
      this.setState({
        statusVisible: false,
      });

      this.init();
    } else {
      message.error(response.message);
    }
  }

  async handleAuthStateEditSave() {
    const { id, auditState, auditDesc } = this.state;

    if (!auditState) {
      return message.error('请选择通过状态');
    }

    if (parseInt(auditState) === 3 && !auditDesc) {
      return message.error('请填写审核描述');
    }

    let params = { id, auditState };

    if (auditDesc) {
      params.auditDesc = auditDesc;
    }

    const response = await memberAudit(params);

    if (response.code === 200) {
      this.setState({
        authStateVisible: false,
      });

      this.init();
    } else {
      message.error(response.message);
    }
  }

  renderAdvancedForm() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 24 }}>
          <Col md={6} sm={24}>
            <FormItem label="">
              {getFieldDecorator('createTime')(
                <RangePicker style={{ width: '100%' }} placeholder={['开始时间', '结束时间']} />
              )}
            </FormItem>
          </Col>

          <Col md={4} sm={24}>
            <FormItem label="">
              {getFieldDecorator('username')(<Input placeholder="会员名称" />)}
            </FormItem>
          </Col>

          <Col md={4} sm={24}>
            <FormItem label="">
              {getFieldDecorator('phone')(<Input placeholder="手机号码" />)}
            </FormItem>
          </Col>

          <Col md={4} sm={24}>
            <FormItem label="">
              {getFieldDecorator('introducer')(<Input placeholder="邀请人" />)}
            </FormItem>
          </Col>
        </Row>

        <Row gutter={{ md: 8, lg: 24, xl: 24 }}>
          <Col md={6} sm={24}>
            <FormItem label="">
              {getFieldDecorator('userType')(
                <Select style={{ width: '100%' }} placeholder="会员类型">
                  {USER_TYPE_ARR.map(item => {
                    return (
                      <Option key={item.id} value={item.id}>
                        {item.name}
                      </Option>
                    );
                  })}
                </Select>
              )}
            </FormItem>
          </Col>

          <Col md={4} sm={24} style={{ padding: '0' }}>
            <FormItem label="">
              {getFieldDecorator('authState')(
                <Select style={{ width: '100%' }} placeholder="会员认证">
                  {AUTH_STATE_ARR.map(item => {
                    return (
                      <Option key={item.id} value={item.id}>
                        {item.name}
                      </Option>
                    );
                  })}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col md={4} sm={24} style={{ padding: '0' }}>
            <FormItem label="">
              {getFieldDecorator('levelId')(
                <Select style={{ width: '100%' }} placeholder="会员等级">
                  {this.state.levelList.map(item => {
                    return (
                      <Option key={item.id} value={item.id}>
                        {item.name}
                      </Option>
                    );
                  })}
                </Select>
              )}
            </FormItem>
          </Col>

          <Col md={4} sm={24} style={{ padding: '0' }}>
            <FormItem label="">
              {getFieldDecorator('status')(
                <Select style={{ width: '100%' }} placeholder="会员状态">
                  {STATUS_ARR.map(item => {
                    return (
                      <Option key={item.id} value={item.id}>
                        {item.name}
                      </Option>
                    );
                  })}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col md={6} sm={24}>
            <span style={{ float: 'right', marginBottom: 24 }}>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
              &nbsp;
              <Button type="primary" onClick={this.handleExport.bind(this)}>
                导出
              </Button>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  async handleShow(item, field) {
    let levelRule = null;
    let authInfo = {};
    let packageList = [];
    let feeMonitorPayload = {};
    let statusMonitorPayload = {};
    let attentionPayload = {};

    if (field === 'levelVisible') {
      levelRule = this.getLevelRule(item.levelId);
    } else if (field === 'authStateVisible') {
      const hide = message.loading('加载中', 0);

      const response = await memberAuthInfo({
        username: item.username,
      });
      if (response.code === 200) {
        authInfo = response.data;
      }

      setTimeout(hide, 1000);
    } else if (field === 'packageVisible') {
      const hide = message.loading('加载中', 0);

      const response = await memberPackageList({
        memberName: item.username,
      });
      if (response.code === 200) {
        packageList = response.data;
      }

      setTimeout(hide, 1000);
    } else if (field === 'feeMonitorVisible') {
      const hide = message.loading('加载中', 0);

      const response = await memberMonitorList({
        memberName: item.username,
        type: 0,
      });
      if (response.code === 200) {
        feeMonitorPayload = {
          list: response.data.list,
          pagination: {
            total: response.data.total,
            pageSize: response.data.pageSize,
            current: 1,
          },
        };
      }

      setTimeout(hide, 1000);
    } else if (field === 'statusMonitorVisible') {
      const hide = message.loading('加载中', 0);

      const response = await memberMonitorList({
        memberName: item.username,
        type: 1,
      });
      if (response.code === 200) {
        statusMonitorPayload = {
          list: response.data.list,
          pagination: {
            total: response.data.total,
            pageSize: response.data.pageSize,
            current: 1,
          },
        };
      }

      setTimeout(hide, 1000);
    } else if (field === 'attentionVisible') {
      const hide = message.loading('加载中', 0);

      const response = await memberAttentionList({
        memberName: item.username,
        keywords: '',
        patentCls: '',
        sellStatus: '',
        pageSize: 100,
        pageNum: 1,
      });
      if (response.code === 200) {
        attentionPayload = {
          list: response.data.list,
          pagination: {
            total: response.data.total,
            pageSize: response.data.pageSize,
            current: 1,
          },
        };
      }

      setTimeout(hide, 1000);
    }

    this.setState({
      ...item,
      [field]: true,
      levelRule,
      authInfo,
      hasAuditPass: authInfo ? authInfo.auditState === 2 : false,
      auditState: authInfo ? authInfo.auditState : null,
      auditDesc: authInfo ? authInfo.auditDesc : null,
      packageList,
      feeMonitorPayload,
      statusMonitorPayload,
      attentionPayload,
    });
  }

  handleSelectOnchange(field, value) {
    let levelRule = null;
    if (field === 'levelId') {
      levelRule = this.getLevelRule(value);
    }
    this.setState({
      [field]: value,
      levelRule,
    });
  }

  getLevelRule(levelId) {
    let levelRule = null;
    const level = this.state.levelOrigin.find(item => parseInt(item.id) === parseInt(levelId));
    if (level) {
      levelRule = level.levelRule;
    }
    return levelRule;
  }

  handleOnchange(field, e) {
    this.setState({
      [field]: e.target.value,
    });
  }

  onChange(field, value, dateString) {
    this.setState({
      [field]: dateString,
    });
  }

  onRadioChange(field, e) {
    this.setState({
      [field]: e.target.value,
    });
  }

  renderForm() {
    return this.renderAdvancedForm();
  }

  render() {
    let { member: { data }, loading } = this.props;
    const { selectedRows, modalVisible, authInfo, userType } = this.state;

    const columns = [
      {
        title: '序号',
        dataIndex: 'id',
        render: (val, item, index) => (
          <span>{(data.pagination.current - 1) * data.pagination.pageSize + index + 1}</span>
        ),
      },
      {
        title: '会员名称',
        ellipsis: true,
        width: 100,
        dataIndex: 'username',
        render: (val, item) => (
          <a onClick={this.handleShow.bind(this, item, 'packageVisible')}>{val}</a>
        ),
      },
      {
        title: '手机号码',
        dataIndex: 'phone',
        render: val => <span>{val || '-'}</span>,
      },
      {
        title: '真实姓名',
        dataIndex: 'contactName',
        render: val => <span>{val || '-'}</span>,
      },
      {
        title: '注册邮箱',
        dataIndex: 'email',
        render: val => <span>{val || '-'}</span>,
      },
      {
        title: '注册时间',
        dataIndex: 'registerTime',
        render: val => <span>{val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : '-'}</span>,
      },
      {
        title: '年费监控',
        dataIndex: 'annualFeeMonitor',
        render: (val, item) => (
          <a onClick={this.handleShow.bind(this, item, 'feeMonitorVisible')}>
            {item.annualFeeMonitor}/{item.totalMonitor}
          </a>
        ),
      },
      {
        title: '状态监控',
        dataIndex: 'contactMan',
        render: (val, item) => (
          <a onClick={this.handleShow.bind(this, item, 'statusMonitorVisible')}>
            {item.statusMonitor}/{item.totalMonitor}
          </a>
        ),
      },
      {
        title: '关注专利',
        dataIndex: 'focusPatent',
        render: (val, item) => (
          <a onClick={this.handleShow.bind(this, item, 'attentionVisible')}>{val}</a>
        ),
      },
      {
        title: '认证状态',
        dataIndex: 'authState',
        render: (val, item) =>
          parseInt(val) === 1 || parseInt(val) === 2 || parseInt(val) === 3 ? (
            <a onClick={this.handleShow.bind(this, item, 'authStateVisible')}>
              {AUTH_STATE_MAP[val]}
            </a>
          ) : (
            <span>{AUTH_STATE_MAP[val]}</span>
          ),
      },

      {
        title: '邀请人',
        dataIndex: 'introducer',
        render: (val, item) => <span>{val || '-'}</span>,
      },
      {
        title: '会员类型',
        dataIndex: 'userType',
        render: val => <span>{USER_TYPE_MAP[val]}</span>,
      },
      {
        title: '会员等级',
        dataIndex: 'levelId',
        render: (val, item) => (
          <a onClick={this.handleShow.bind(this, item, 'levelVisible')}>
            {this.state.levelObj[val]}
          </a>
        ),
      },

      {
        title: '会员状态',
        dataIndex: 'status',
        render: (val, item) => (
          <a onClick={this.handleShow.bind(this, item, 'statusVisible')}>{STATUS_MAP[val]}</a>
        ),
      },
    ];

    return (
      <PageHeaderLayout title="会员管理">
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div className={styles.tableListForm}>{this.renderForm()}</div>
            <StandardTable
              disableSelect={true}
              selectedRows={selectedRows}
              loading={loading}
              data={data}
              columns={columns}
              onSelectRow={this.handleSelectRows}
              onChange={this.handleStandardTableChange}
            />
          </div>
        </Card>

        <Modal
          style={{ width: '800px' }}
          title={'会员管理——会员等级'}
          visible={this.state.levelVisible}
          onOk={this.handleLevelEditSave.bind(this)}
          onCancel={this.handleCancel.bind(this, 'levelVisible')}
        >
          <DescriptionList size="large" title="" col="1">
            <Description term="会员等级">
              <Select
                style={{ width: '100%' }}
                value={this.state.levelId + ''}
                onChange={this.handleSelectOnchange.bind(this, 'levelId')}
                placeholder="会员等级"
              >
                {this.state.levelListNoDefault.map(item => {
                  return (
                    <Option key={item.id} value={item.id}>
                      {item.name}
                    </Option>
                  );
                })}
              </Select>
            </Description>
            <Description term="等级规则">
              年费代缴服务费为 {this.state.levelRule} 元/件。
            </Description>
          </DescriptionList>
        </Modal>

        <Modal
          style={{ width: '800px' }}
          title={'会员管理——会员状态'}
          visible={this.state.statusVisible}
          onOk={this.handleStatusEditSave.bind(this)}
          onCancel={this.handleCancel.bind(this, 'statusVisible')}
        >
          <DescriptionList size="large" title="" col="1">
            <Description term="会员状态">
              <Select
                style={{ width: '100%' }}
                value={this.state.status + ''}
                onChange={this.handleSelectOnchange.bind(this, 'status')}
                placeholder="会员状态"
              >
                {STATUS_ARR_NO_DEFAULT.map(item => {
                  return (
                    <Option key={item.id} value={item.id}>
                      {item.name}
                    </Option>
                  );
                })}
              </Select>
            </Description>
          </DescriptionList>
        </Modal>

        <Modal
          style={{ width: '800px' }}
          title={'会员管理——认证状态'}
          visible={this.state.authStateVisible}
          onOk={this.handleAuthStateEditSave.bind(this)}
          onCancel={this.handleCancel.bind(this, 'authStateVisible')}
        >
          {authInfo && (
            <DescriptionList size="large" title="" col="1">
              <Description term="会员类型">
                <Select
                  style={{ width: '100%' }}
                  disabled
                  value={userType + ''}
                  onChange={this.handleSelectOnchange.bind(this, 'userType')}
                  placeholder="会员等级"
                >
                  {USER_TYPE_ARR.map(item => {
                    return (
                      <Option key={item.id} value={item.id}>
                        {item.name}
                      </Option>
                    );
                  })}
                </Select>
              </Description>

              {parseInt(userType) === 0 && (
                <Description term="申请人姓名">{authInfo.name}</Description>
              )}
              {parseInt(userType) === 0 && (
                <Description term="身份证号码">{authInfo.code}</Description>
              )}
              {parseInt(userType) === 0 && <Divider />}
              {parseInt(userType) === 0 && (
                <Description term="身份证照片（人像面）">
                  {authInfo.imageUrl1 && (
                    <img style={{ width: '100px' }} src={authInfo.imageUrl1} />
                  )}
                </Description>
              )}
              {parseInt(userType) === 0 && (
                <Description term="身份证照片（国徽面）">
                  {authInfo.imageUrl2 && (
                    <img style={{ width: '100px' }} src={authInfo.imageUrl2} />
                  )}
                </Description>
              )}

              {parseInt(userType) === 1 && (
                <Description term="公司名称">{authInfo.name}</Description>
              )}
              {parseInt(userType) === 1 && (
                <Description term="统一社会信用代码">{authInfo.code}</Description>
              )}
              {parseInt(userType) === 1 && (
                <Description term="联系人姓名">{authInfo.contactName}</Description>
              )}
              {parseInt(userType) === 1 && (
                <Description term="联系号码">{authInfo.contactNo}</Description>
              )}
              {parseInt(userType) === 1 && <Divider />}
              {parseInt(userType) === 1 && (
                <Description term="营业执照副本照片">
                  {authInfo.imageUrl1 && (
                    <img style={{ width: '100px' }} src={authInfo.imageUrl1} />
                  )}
                </Description>
              )}

              {parseInt(userType) === 2 && (
                <Description term="公司名称">{authInfo.code}</Description>
              )}
              {parseInt(userType) === 2 && (
                <Description term="统一社会信用代码">{authInfo.code}</Description>
              )}
              {parseInt(userType) === 2 && (
                <Description term="联系人姓名">{authInfo.contactName}</Description>
              )}
              {parseInt(userType) === 2 && (
                <Description term="联系号码">{authInfo.contactNo}</Description>
              )}
              {parseInt(userType) === 2 && <Divider />}
              {parseInt(userType) === 2 && (
                <Description term="机构营业凭证">
                  {authInfo.imageUrl1 && (
                    <img style={{ width: '100px' }} src={authInfo.imageUrl1} />
                  )}
                </Description>
              )}

              {parseInt(userType) === 3 && (
                <Description term="机构名称">{authInfo.code}</Description>
              )}
              {parseInt(userType) === 3 && (
                <Description term="统一社会信用代码">{authInfo.code}</Description>
              )}
              {parseInt(userType) === 3 && (
                <Description term="联系人姓名">{authInfo.contactName}</Description>
              )}
              {parseInt(userType) === 3 && (
                <Description term="联系号码">{authInfo.contactNo}</Description>
              )}
              {parseInt(userType) === 3 && <Divider />}
              {parseInt(userType) === 3 && (
                <Description term="高校或科技管理部门凭证">
                  {authInfo.imageUrl1 && (
                    <img style={{ width: '100px' }} src={authInfo.imageUrl1} />
                  )}
                </Description>
              )}

              {parseInt(userType) === 4 && (
                <Description term="研发机构名称">{authInfo.code}</Description>
              )}
              {parseInt(userType) === 4 && (
                <Description term="统一社会信用代码">{authInfo.code}</Description>
              )}
              {parseInt(userType) === 4 && (
                <Description term="联系人姓名">{authInfo.contactName}</Description>
              )}
              {parseInt(userType) === 4 && (
                <Description term="联系号码">{authInfo.contactNo}</Description>
              )}
              {parseInt(userType) === 4 && <Divider />}
              {parseInt(userType) === 4 && (
                <Description term="营业执照副本或同等效力凭证">
                  {authInfo.imageUrl1 && (
                    <img style={{ width: '100px' }} src={authInfo.imageUrl1} />
                  )}
                </Description>
              )}
              <Divider />
              <Description term="通过状态">
                <RadioGroup
                  disabled={this.state.hasAuditPass}
                  onChange={this.onRadioChange.bind(this, 'auditState')}
                  value={parseInt(this.state.auditState)}
                >
                  <Radio value={2}>通过</Radio>
                  <Radio value={3}>不通过</Radio>
                </RadioGroup>
              </Description>
              <Description term="审核描述" termStyle={styles.top}>
                <TextArea
                  disabled={this.state.hasAuditPass}
                  rows={4}
                  value={this.state.auditDesc}
                  onChange={this.handleOnchange.bind(this, 'auditDesc')}
                />
              </Description>
              <div style={{ color: 'red' }}>
                提示：点击保存后，系统将默认为用户发送一条通知短信，告知客户审核结果，请谨慎核对信息后再点击按钮，多次点击保存按钮系统将会发送多条短信。
              </div>
            </DescriptionList>
          )}
        </Modal>

        <Modal
          style={{ width: '800px' }}
          title={'会员管理——会员信息'}
          onCancel={this.handleCancel.bind(this, 'packageVisible')}
          onOk={this.handleCancel.bind(this, 'packageVisible')}
          visible={this.state.packageVisible}
        >
          <DescriptionList size="large" title="" col="1">
            <Row gutter={{ md: 8, lg: 24, xl: 24 }}>
              <Col md={12} sm={24}>
                <Description term="会员名称">{this.state.username}</Description>
              </Col>
              <Col md={12} sm={24}>
                <Description term="性别">{GENDER_MAP[this.state.gender] || '-'}</Description>
              </Col>
            </Row>
            <Row gutter={{ md: 8, lg: 24, xl: 24 }}>
              <Col md={12} sm={24}>
                <Description term="真实姓名">{this.state.realName || '-'}</Description>
              </Col>
              <Col md={12} sm={24} />
            </Row>
            <Row gutter={{ md: 8, lg: 24, xl: 24 }}>
              <Col md={12} sm={24}>
                <Description term="手机号码">{this.state.phone || '-'}</Description>
              </Col>
              <Col md={12} sm={24}>
                <Description term="QQ">{this.state.qq || '-'}</Description>
              </Col>
            </Row>
            <Row gutter={{ md: 8, lg: 24, xl: 24 }}>
              <Col md={12} sm={24}>
                <Description term="电子邮箱">{this.state.email || '-'}</Description>
              </Col>
              <Col md={12} sm={24}>
                <Description term="会员类型">{USER_TYPE_MAP[this.state.userType]}</Description>
              </Col>
            </Row>
            <Row gutter={{ md: 8, lg: 24, xl: 24 }}>
              <Col md={24} sm={24}>
                <Description term="工作单位">{this.state.company || '-'}</Description>
              </Col>
            </Row>
            <Row gutter={{ md: 8, lg: 24, xl: 24 }}>
              <Col md={24} sm={24}>
                <Description term="居住地">{this.state.livePlace || '-'}</Description>
              </Col>
            </Row>
          </DescriptionList>

          <DescriptionList style={{ marginTop: 40 }} size="large" title="账户信息" col="1">
            <Table
              pagination={{ hideOnSinglePage: true }}
              dataSource={this.state.packageList}
              columns={[
                {
                  title: '获取套餐',
                  dataIndex: 'packageName',
                },
                {
                  title: '获取时间',
                  dataIndex: 'createTime',
                  render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
                },
                {
                  title: '获取方式',
                  dataIndex: 'email',
                  render: val => <span>{val || '-'}</span>,
                },
              ]}
            />
          </DescriptionList>
        </Modal>

        <Modal
          width="90%"
          title={'会员管理——年费监控'}
          onCancel={this.handleCancel.bind(this, 'feeMonitorVisible')}
          onOk={this.handleCancel.bind(this, 'feeMonitorVisible')}
          visible={this.state.feeMonitorVisible}
        >
          <DescriptionList size="large" title="" col="1" />

          <DescriptionList style={{ marginTop: 40 }} size="large" title="" col="1">
            <StandardTable
              disableSelect={true}
              selectedRows={selectedRows}
              onSelectRow={this.handleSelectRows}
              onChange={this.handleStandardTableChange}
              data={this.state.feeMonitorPayload}
              columns={[
                {
                  title: '序号',
                  dataIndex: 'id',
                },
                {
                  title: '专利号',
                  dataIndex: 'patentNo',
                },
                {
                  title: '专利名称',
                  dataIndex: 'patentTi',
                },
                {
                  title: '专利类型',
                  dataIndex: 'patentCls',
                  render: val => <span>{PATENT_CLS_MAP[val]}</span>,
                },
                {
                  title: '法律状态',
                  dataIndex: 'patentLsnt',
                },
                {
                  title: '申请人',
                  dataIndex: 'patentPa',
                },
                {
                  title: '代理机构',
                  dataIndex: 'patentAgt',
                },
              ]}
            />
          </DescriptionList>
        </Modal>

        <Modal
          width="90%"
          title={'会员管理——状态监控'}
          onCancel={this.handleCancel.bind(this, 'statusMonitorVisible')}
          onOk={this.handleCancel.bind(this, 'statusMonitorVisible')}
          visible={this.state.statusMonitorVisible}
        >
          <DescriptionList size="large" title="" col="1" />

          <DescriptionList style={{ marginTop: 40 }} size="large" title="" col="1">
            <StandardTable
              disableSelect={true}
              selectedRows={selectedRows}
              onSelectRow={this.handleSelectRows}
              onChange={this.handleStandardTableChange}
              data={this.state.statusMonitorPayload}
              columns={[
                {
                  title: '序号',
                  dataIndex: 'id',
                },
                {
                  title: '专利号',
                  dataIndex: 'patentNo',
                },
                {
                  title: '专利名称',
                  dataIndex: 'patentTi',
                },
                {
                  title: '专利类型',
                  dataIndex: 'patentCls',
                  render: val => <span>{PATENT_CLS_MAP[val]}</span>,
                },
                {
                  title: '法律状态',
                  dataIndex: 'patentLsnt',
                },
                {
                  title: '申请人',
                  dataIndex: 'patentPa',
                },
                {
                  title: '代理机构',
                  dataIndex: 'patentAgt',
                },
              ]}
            />
          </DescriptionList>
        </Modal>

        <Modal
          width="90%"
          title={'会员管理——关注专利'}
          onCancel={this.handleCancel.bind(this, 'attentionVisible')}
          onOk={this.handleCancel.bind(this, 'attentionVisible')}
          visible={this.state.attentionVisible}
        >
          <DescriptionList size="large" title="" col="1" />

          <DescriptionList style={{ marginTop: 40 }} size="large" title="" col="1">
            <StandardTable
              disableSelect={true}
              selectedRows={selectedRows}
              onSelectRow={this.handleSelectRows}
              onChange={this.handleStandardTableChange}
              data={this.state.attentionPayload}
              columns={[
                {
                  title: '序号',
                  dataIndex: 'id',
                },
                {
                  title: '专利号',
                  dataIndex: 'patentNo',
                },
                {
                  title: '专利名称',
                  dataIndex: 'patentTi',
                },
                {
                  title: '专利类型',
                  dataIndex: 'patentCls',
                  render: val => <span>{PATENT_CLS_MAP[val]}</span>,
                },
                {
                  title: '法律状态',
                  dataIndex: 'patentLsnt',
                },
                {
                  title: '申请人',
                  dataIndex: 'patentPa',
                },
                {
                  title: '代理机构',
                  dataIndex: 'patentAgt',
                },
              ]}
            />
          </DescriptionList>
        </Modal>
      </PageHeaderLayout>
    );
  }
}
